<script setup>
import { inject, onMounted, ref, shallowRef } from "vue";
import memberListData from "@/dicts/member/memberList.json";
import { getMemberPage } from "@/api/member.js";
import emitter from "@/utils/mitt.js";

const changePath = (path, query = null) => {
	emitter.emit("changePath", {
		path: path,
		query: query,
	});
};

const splitTime = (time) => {
	// 将YYYY-MM-DD格式转换为{year: YYYY, month: MM, day: DD}
	const timestamp = Date.parse(time);
	// 如果timestamp为NaN则返回''
	if (!timestamp) return "";
	const newTime = new Date(timestamp);
	return {
		year: addZero(newTime.getFullYear()),
		month: addZero(newTime.getMonth() + 1),
		day: addZero(newTime.getDate()),
	};
};
const addZero = (num) => `${num < 10 ? "0" : ""}${num}`;

const searchText = ref(null);
const memberList = ref([]);
const total = ref(0);
const pages = ref(0);
const queryParams = ref({
	pageSize: 16,
	pageNum: 1,
});

const getMemberList = async () => {
	const res = await getMemberPage({ ...queryParams.value, isView: 1, status: 2, searchText: searchText.value });
	if (res.data.code === 200) {
		memberList.value = res.data.data.records;
		total.value = res.data.data.total;
		pages.value = res.data.data.pages;
	}
};

onMounted(() => {
	getMemberList();
});
</script>

<template>
	<div class="pageContent">
		<n-space align="center" justify="space-between" style="margin-bottom: 20px">
			<n-h6 class="pageTitle" prefix="bar">
				<div>会员展示</div>
			</n-h6>
			<n-input-group>
				<n-input placeholder="请输入会员名称" style="width: 200px" v-model:value="searchText" @keyup.enter="getMemberList"></n-input>
				<n-button type="primary" @click="getMemberList">
					<n-icon :size="20" :color="'#fff'">
						<Search />
					</n-icon>
				</n-button>
			</n-input-group>
		</n-space>

		<n-list :bordered="false" hoverable style="margin-bottom: 20px">
			<n-list-item v-for="item in memberList">
				<template #prefix>
					<div class="timeBox" style="text-align: center">
						<div class="timeBoxDay">
							{{ splitTime(item.createTime).day }}
						</div>
						<div class="timeBoxYaM">
							{{ splitTime(item.createTime).year + "/" + splitTime(item.createTime).month }}
						</div>
					</div>
				</template>
				<n-h6 class="listTitle" prefix="bar" @click="changePath(`/index/member/memberList/memberDetail`, { id: item.id })">
					{{ item.unitName }}
				</n-h6>
				<n-ellipsis :tooltip="false" :line-clamp="2" class="listDescription">
					{{ item.invoicingBlurb }}
				</n-ellipsis>
			</n-list-item>
		</n-list>

		<n-divider class="pageDivider"></n-divider>
		<n-list :bordered="false" hoverable style="margin-bottom: 20px"> </n-list>
		<n-space justify="center">
			<n-pagination
				show-quick-jumper
				:page-count="pages"
				v-model:page-size="queryParams.pageSize"
				v-model:page="queryParams.pageNum"
				:onUpdate:page="getMemberList">
				<template #prefix>共{{ total }}条</template>
				<template #suffix>页</template>
			</n-pagination>
		</n-space>
	</div>
</template>

<style scoped>
.timeBox {
	width: 70px;
	height: 70px;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
}
.timeBoxDay {
	height: 48px;
	font-weight: bold;
	font-size: 24px;
	border-bottom: 1px solid var(--primary-color);
	margin: auto;
	line-height: 48px;
}
.timeBoxYaM {
	height: 22px;
}
.listDescription {
	font-size: 14px;
	color: #999;
}
.listTitle {
	cursor: pointer;
	margin-bottom: 10px;
	font-weight: bold;
}
</style>
